<template>
  <div>
    <div class="top">
      <div class="top">
        <div class="tleft">
          <span @click="$router.back()"><van-icon name="arrow-left" /></span>
          <h1>订单列表</h1>
        </div>
      </div>
    </div>
    <div class="conter" v-for="(zuowei, zwindex) in zuoweilist" :key="zwindex">
      <div class="boxtop">
        <div class="zuo">
          {{ zuowei.cinemaName.split(",")[0] }}&nbsp;&nbsp;>
        </div>
      </div>
      <div class="boxcen">
        <div class="boxleft"><img :src="zuowei.img" alt="" /></div>
        <div class="boxright">
          <div class="name">{{ zuowei.movieName.split(",")[0] }}</div>
          <div class="shijian">
            <div class="date">{{ zuowei.showDate }}</div>
            <div class="tm">{{ zuowei.tm.split(",")[0] }}</div>
          </div>
          <div class="piao">
            <p
              v-for="(seat, seindex) in zuowei.zuoId"
              :key="seindex"
              :seindex="seindex"
            >
              {{ seat.row }}排{{ seat.col }}座
            </p>
          </div>
        </div>
      </div>
      <div class="boxxia">
        <div class="jiage">
          总价：￥
          {{ zuowei.sum }}
        </div>
        <div class="shan" @click="del(zuowei.movieId)">删除订单</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const zuoweilist = ref(JSON.parse(localStorage.getItem("lists")) || []);
const del = (movieId) => {
  zuoweilist.value = zuoweilist.value.filter((o) => o.movieId !== movieId);
  console.log(zuoweilist.value);
  localStorage.setItem("lists", JSON.stringify(zuoweilist.value));
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  height: 8vh;
  line-height: 8vh;
  font-size: 18rem;
  color: #fff;
  background-color: #e54847;
  .tleft {
    display: flex;
    width: 75vw;
    h1 {
      margin-left: 100rem;
    }
  }
}
:deep(.van-popover--light) {
  z-index: 2004;
  position: absolute;
  right: -80px;
  top: -7.5px;
}
.conter {
  padding: 5rem;
  margin-top: 10rem;
  .boxtop {
    font-size: 14rem;
    color: #333;
  }
  .boxcen {
    display: flex;
    padding: 5rem;
    .boxleft {
      width: 70rem;
      height: 100rem;
      margin-right: 5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .boxright {
      .name {
        font-size: 16rem;
        color: #333;
      }
      .shijian {
        margin: 10rem 0;
        font-size: 14rem;
        font-weight: 700;
        color: #666;
        display: flex;
        .date {
          margin-right: 5rem;
        }
      }
      .piao {
        display: flex;
        font-size: 14rem;
        font-weight: 500;
        color: #666;
        display: flex;
        p {
          margin-right: 5rem;
        }
      }
    }
  }
  .boxxia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .jiage {
      font-size: 13rem;
      color: #666;
    }
    .shan {
      padding: 3rem 4rem;
      color: #666;
      border: 1rem solid #666;
      border-radius: 12rem;
    }
  }
}
</style>
